<template>
   <view>
      <view class="search-bar">
         <u-search v-model="filterName" ref="search" placeholder="搜索" actionText="取消" :focus="isFocus"
         maxlength="20" clearabled style="margin: auto;" @custom="goBack" @search="onSearch"></u-search>
      </view>
      <view class="content">
         <u-gap height="10" bgColor="#f5f5f5"></u-gap>
         <view class="history" v-if="!isSearch">
            <view class="history_header">
               <view class="history_label">
                  <text>搜索记录</text>
               </view>
               <view class="history_del_btn">
                  <image src="/static/tab3/delete.png" mode="aspectFill" @click="show = true"
                  style="display: inline-flex;width: 20px;height: 20px;"></image>
               </view>
            </view>
            <view class="history_content">
               <view v-if="list.length > 0">
                  <view class="history_content_tag" v-for="item in list" :key="item" @click="onSearch">
                     <text class="history_content_tag_label">{{item}}</text>
                  </view>
               </view >
               <u-empty v-else icon="/static/tab3/history.png" text="暂无搜索记录" 
               width="50vw" style="margin: auto;"></u-empty>
            </view>
         </view>
         <view class="search" v-else>
            <u-empty v-if="searchList.length == 0" icon="/static/tab3/search.png"></u-empty>
            <view v-else class="search_content">
               <view class="search_content_cell">
                  <view class="search_content_wrap">
                     <view class="search_cell_avatar">
                        <image src="/static/uni.png" mode="aspectFill" style="width: 36px;height: 36px;border-radius: 50%;"></image>
                     </view>
                     <view class="search_content_info">
                        <view class="search_content_info_name">
                           <text>用户名</text>
                        </view>
                        <view class="search_content_info_major">
                           <text>软件工程</text>
                        </view>
                     </view>
                     <view class="search_content_action">
                        <view class="search_content_action_btn">
                           <text>添加</text>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
         </view>
      </view>
      
      <u-modal :show="show" content="确认删除全部历史记录？" confirmColor="#0aa679"
      showCancelButton asyncClose cancelText="取消"  @cancel="show = false" @confirm="clearHostory"></u-modal>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            filterName: '',
            isFocus: false,
            isSearch: false,
            list: [],
            show: false,
            searchList: [{}]
         }
      },
      created() {
         if(this.$appStore.getStorage('history:search')) {
            this.list = this.$appStore.getStorage('history:search')
         }else {
            this.list = []
         }
      },
      mounted() {
         
      },
      onLoad() {
         this.isFocus = true
      },
      methods: {
         goBack() {
            uni.navigateBack()
         },
         onSearch() {
            const index = this.list.findIndex(item => {
               return item == this.filterName
            })
            if((this.filterName??'') != '') {
               if(index != -1) {
                  this.list.unshift(this.filterName)
                  this.list = [...new Set(this.list)]
               }else {
                  this.list.push(this.filterName)
               }
            }
            this.$appStore.setStorage('history:search', this.list)
            this.isSearch = true
         },
         clearHostory() {
            this.list = []
            this.$appStore.setStorage('history:search', this.list)
            this.show = false
         }
      }
   }
</script>

<style lang="scss" scoped>
   .search-bar {
      height: 54px;
      background-color: #fff;
      margin-top: var(--status-bar-height);
      line-height: 54px;
      overflow: hidden;
      
      & /deep/ .u-search {
         width: 90%;
      }
   }
   .content {
      height: calc(100vh - 54px - var(--status-bar-height));
      background-color: #fff;
      
      .history {
         width: 90%;
         margin: 10px auto;
         
         .history_header {
            display: flex;
            
            & > view {
               width: 100%;
            }
            
            .history_label {
               font-size: 16px;
               text-align: left;
            }
            
            .history_del_btn {
               text-align: right;
               
               & > * {
                  justify-content: right;
               }
            }
         }
         
         .history_content {
            display: flex;
            margin: 10px auto;
            flex-wrap: wrap;
            
            .history_content_tag {
               padding: 2px 10px;
               margin: 5px 10px;
               border-radius: 50px;
               background-color: #f5f5f5;
            }
         }
      }
      
      .search {
         width: 100%;
         
         .search_content {
            overflow: hidden;
            background-color: #f5f5f5;
            
            .search_content_cell {
               width: 100%;
               padding: 6px 0;
               background-color: #fff;
               border-bottom: 1px solid #ccc;
               box-sizing: border-box;
               
               .search_content_wrap {
                  display: flex;
                  width: 94%;
                  margin: auto;
               }
               
               .search_cell_avatar {
                  margin-right: 10px;
                  
                  image {
                     display: block;
                  }
               }
               
               .search_content_info {
                  width: 100%;
                  
                  .search_content_info_name {
                     font-size: 16px;
                     line-height: 16px;
                  }
                  
                  .search_content_info_major {
                     width: 100%;
                     margin-top: 5px;
                     line-height: 14px;
                  }
               }
               
               .search_content_action {
                  display: inline-flex;
                  align-self: center;
                  
                  .search_content_action_btn {
                     width: 32px;
                     padding: 2px 10px;
                     margin: auto;
                     background-color: #0aa679;
                     border-radius: 20px;
                     color: #fff;
                     text-align: center;
                  }
               }
            }
         }
      }
   }
</style>
